<!DOCTYPE html>
<html lang="en">
<head>
  <title>AOS</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/home.css">
  <link rel="stylesheet" href="./layui/css/layui.css">
  <style>
  </style>
</head>
<body>
  <div class="aos">
     <div class="cons">
        <div class="top">
          <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" name="start_time" class="layui-input input" id="start_time" placeholder="Date Range">
            </div>
            <!-- <div class="layui-input-inline">
              <input type="text" name="start_time1" class="layui-input input" id="start_time1" placeholder="">
          </div> -->
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
              <input type="text" name="end_time" class="layui-input input" id="end_time" placeholder="Date Range">
            </div>
            <!-- <div class="layui-input-inline">
              <input type="text" name="end_time1" class="layui-input input" id="end_time1" placeholder="">
            </div> -->
        </div>
        </div>
        <table class="layui-table" lay-data="{height:315, url:'', page:true, id:'test'}" lay-filter="test" id="userList">
          <thead>
            <tr>
              <th lay-data="{field:'Campaign Name', width:100}">Campaign Name</th>
              <th lay-data="{field:'Impression', width:120, sort: true}">Impression</th>
              <th lay-data="{field:'Visits', width:95, sort: true}">Visits</th>
              <th lay-data="{field:'Clicks', width:95,sort: true}">Clicks</th>
              <th lay-data="{field:'Conversions',width:130, sort: true}">Conversions</th>
              <th lay-data="{field:'eCPA',width:70}">eCPA</th>
              <th lay-data="{field:'eTTC',width:65}">eTTC</th>
              <th lay-data="{field:'Revenue', sort: true,width:110}">Revenue</th>
              <th lay-data="{field:'Spend', sort: true}">Spend</th>
              <th lay-data="{field:'Profit', sort: true ,width:80}">Profit</th>
              <th lay-data="{field:'Status', sort: true}">Status</th>
              <th lay-data="{field:'Operations',width:160}">Operations</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>ADHJHDJDH111</td>
              <td><span class="s1">13%</span><span class="s2">(10%)</span></td>
              <td><span class="s1">10%</span><span class="s2">(10%)</span></td>
              <td><span class="s1">10%</span><span class="s2">(10%)</span></td>
              <td><span class="s1">10%</span><span class="s2">(10%)</span></td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td><span class="s3">111</span></td>
              <td>
                <img src="./img/ss.png" alt="" class="im1">
              </td>
              <td>
                <div class="sd">
                  <button type="button" class="layui-btn layui-btn-xs">Log</button>
                  <button type="button" class="layui-btn layui-btn-xs">Clear</button>
                  <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete delete" id="dels">Delete</button>
                </div>
              </td>
            </tr>
            <tr>
              <td>ADHJHDJDH111</td>
              <td><span class="s1">10%</span><span class="s2">(10%)</span></td>
              <td><span class="s1">11%</span><span class="s2">(10%)</span></td>
              <td><span class="s1">12%</span><span class="s2">(10%)</span></td>
              <td><span class="s1">14%</span><span class="s2">(10%)</span></td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td><span class="s3">1111</span></td>
              <td><img src="./img/aq.png" alt="" class="im1">
              </td>
              <td>
                <div class="sd">
                  <button type="button" class="layui-btn layui-btn-xs">Log</button>
                  <button type="button" class="layui-btn layui-btn-xs">Clear</button>
                  <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete delete" >Delete</button>
                </div>

              </td>
            </tr>
            <tr>
              <td>ADHJHDJDH111</td>
              <td><span class="s1">11%</span><span class="s2">(10%)</span></td>
              <td><span class="s1">10%</span><span class="s2">(10%)</span></td>
              <td><span class="s1">10%</span><span class="s2">(10%)</span></td>
              <td><span class="s1">10%</span><span class="s2">(10%)</span></td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td><span class="s4">-111</span></td>
              <td>
                <img src="./img/aq.png" alt="" class="im1">
              </td>
              <td>
                <div class="sd">
                  <button type="button" class="layui-btn layui-btn-xs">Log</button>
                  <button type="button" class="layui-btn layui-btn-xs">Clear</button>
                  <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete delete">Delete</button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
     </div>
     <div class="layui-tab">
      <ul class="layui-tab-title">
        <li class="layui-this">Details</li>
        <li>Paths</li>
        <li>Rules</li>
        <li>Outputs</li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
          <form class="layui-form" action="">
            <div class="layui-form-item">
              <label class="layui-form-label">Campaign Name</label>
              <div class="layui-input-block">
                <input type="text" name="title"    placeholder="请输入标题" autocomplete="off" class="layui-input input">
              </div>
            </div>

            <div class="layui-form-item">
              <label class="layui-form-label">Status</label>
              <div class="layui-input-block">
                <input type="radio" name="sex" value="Running" title="Running">
                <input type="radio" name="sex" value="Paused" title="Paused" checked>
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">Campaign Type</label>
              <div class="layui-input-block">
                <select name="city" >
                  <option value=""></option>
                  <option value="0">Click</option>
                  <option value="1">3rd Party</option>
                </select>
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">Sources Variable</label>
              <div class="layui-input-block">
                <input type="text" name="title"    placeholder="请输入标题" autocomplete="off" class="layui-input input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">Apps/Sites Variable</label>
              <div class="layui-input-block">
                <input type="text" name="title"    placeholder="请输入标题" autocomplete="off" class="layui-input input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">Publisher Name Variable</label>
              <div class="layui-input-block">
                <input type="text" name="title"    placeholder="请输入标题" autocomplete="off" class="layui-input input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">Tracking</label>
              <div class="layui-input-block">
                <input type="text" name="title"    placeholder="请输入标题" autocomplete="off" class="layui-input input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">Domain</label>
              <div class="layui-input-block">
                <input type="text" name="title"    placeholder="请输入标题" autocomplete="off" class="layui-input input">
              </div>
            </div>

            <div class="layui-form-item">
              <label class="layui-form-label">Campaign URL</label>
              <div class="layui-input-block">
                <input type="text" name="title"    placeholder="请输入标题" autocomplete="off" class="layui-input input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">Impression pixel URL</label>
              <div class="layui-input-block">
                <input type="text" name="title"    placeholder="请输入标题" autocomplete="off" class="layui-input input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">Click URL</label>
              <div class="layui-input-block">
                <input type="text" name="title"    placeholder="请输入标题" autocomplete="off" class="layui-input input">
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
              </div>
            </div>
          </form>
        </div>
        <div class="layui-tab-item">
          <form class="layui-form" action="">
            <div class="layui-form-item">
              <label class="layui-form-label">Impression Path</label>
              <div class="layui-input-block">
                <input type="text"  name="title"    placeholder="请输入标题" autocomplete="off" class="layui-input input ">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">Visits Path</label>
              <div class="layui-input-block">
                <input type="text" name="title"     placeholder="请输入标题" autocomplete="off" class="layui-input input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">Clicks Path</label>
              <div class="layui-input-block">
                <input type="text" name="title"     placeholder="请输入标题" autocomplete="off" class="layui-input input">
              </div>
            </div>

            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
              </div>
            </div>
          </form>
        </div>
        <div class="layui-tab-item">
          <table class="layui-table" lay-data="{height:315, url:'', id:'test'}" lay-filter="test" id="userList1">
            <thead>
              <tr>
                <th lay-data="{field:'排序'}">排序</th>
                <th lay-data="{field:'状态'}">状态</th>
                <th lay-data="{field:'判断类型'}">判断类型</th>
                <th lay-data="{field:'名单类型'}">名单类型</th>
                <th lay-data="{field:'规则数量'}">规则数量</th>
                <th lay-data="{field:'Operations'}">Operations</th>
              </tr>
            </thead>
            <tbody>

              <tr>
                <td>1</td>
                <td>Running </td>
                <td>自定义过滤</td>
                <td>黑名单</td>
                <td>3</td>
                <td>
                  <div class="sd">
                    <button type="button" class="layui-btn layui-btn-xs">Edit </button>
                    <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">Delete</button>
                  </div>
                </td>
              </tr>
              <tr>
                <td>2</td>
                <td>Paused </td>
                <td>来路过滤过滤</td>
                <td>黑名单</td>
                <td>3</td>
                <td>
                  <div class="sd">
                    <button type="button" class="layui-btn layui-btn-xs">Edit </button>
                    <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">Delete</button>
                  </div>
                </td>
              </tr>
              <tr>
                <td>3</td>
                <td>Paused </td>
                <td>UA过滤</td>
                <td>黑名单</td>
                <td>3</td>
                <td>
                  <div class="sd">
                    <button type="button" class="layui-btn layui-btn-xs">Edit </button>
                    <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">Delete</button>
                  </div>
                </td>
              </tr>
              <tr>
                <td>4</td>
                <td>Paused </td>
                <td>语言过滤</td>
                <td>黑名单</td>
                <td>3</td>
                <td>
                  <div class="sd">
                    <button type="button" class="layui-btn layui-btn-xs">Edit </button>
                    <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">Delete</button>
                  </div>
                </td>
              </tr>
              <tr>
                <td>5</td>
                <td>Paused </td>
                <td>Ip过滤</td>
                <td>黑名单</td>
                <td>3</td>
                <td>
                  <div class="sd">
                    <button type="button" class="layui-btn layui-btn-xs">Edit </button>
                    <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">Delete</button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
          <button class="layui-btn" lay-submit lay-filter="formDemo" id="adds">添加</button>

        </div>
        <div class="layui-tab-item">  <table class="layui-table" lay-data="{height:315, url:'', id:'test'}" lay-filter="test" id="userList1">
          <thead>
            <tr>
              <th lay-data="{field:'0'}">序号</th>
              <th lay-data="{field:'1'}">输出类型</th>
              <th lay-data="{field:'2'}">状态</th>
              <th lay-data="{field:'3'}">备注</th>
              <th lay-data="{field:'Operations'}">Operations</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>成功</td>
              <td>运行中 </td>
              <td>1234546</td>
              <td>
                <div class="sd">
                  <button type="button" class="layui-btn layui-btn-xs">Edit </button>
                  <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">Delete</button>
                </div>
              </td>
            </tr>
            <tr>
              <td>2</td>
              <td>成功</td>
              <td>运行中 </td>
              <td>1234546</td>
              <td>
                <div class="sd">
                  <button type="button" class="layui-btn layui-btn-xs">Edit </button>
                  <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">Delete</button>
                </div>
              </td>
            </tr>
              <tr>
                <td>3</td>
                <td>成功</td>
                <td>运行中 </td>
                <td>1234546</td>
                <td>
                  <div class="sd">
                    <button type="button" class="layui-btn layui-btn-xs">Edit </button>
                    <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">Delete</button>
                  </div>
                </td>
              </tr>
          </tbody>
        </table>
        <button class="layui-btn" lay-submit lay-filter="formDemo" id="adds1">添加</button>
</div>
      </div>
    </div>
  </div>
  <div class="zzao" id="zzao">
    <form class="layui-form" action="">
      <div class="layui-form-item">
        <label class="layui-form-label">排序：</label>
        <div class="layui-input-block" style="width: 400px;">
          <input type="text"  name="title"    placeholder="请输入标题" autocomplete="off" class="layui-input input1 ">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">判断类型：</label>
        <div class="layui-input-block" style="width: 400px;">
          <select name="city" >
            <option value="">请选择</option>
            <option value="0">自定义过滤</option>
            <option value="1">来路过滤</option>
            <option value="2">UA过滤</option>
            <option value="3">语言过滤</option>
            <option value="4">IP过滤</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item canshu">
        <label class="layui-form-label">参数名：</label>
        <div class="layui-input-block" style="width: 400px;">
          <input type="text"  name="title"    placeholder="请输入标题" autocomplete="off" class="layui-input input1 ">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">名单类型：</label>
        <div class="layui-input-block" >
          <input type="radio" name="sex" value="" title="包括（白名单）">
          <input type="radio" name="sex" value="" title="排除（黑名单）" checked>
        </div>
      </div>
      <div class="layui-form-item layui-form-text" style="width: 100%;">
        <label class="layui-form-label">规则类型：</label>
        <div class="layui-input-block" >
          <input type="radio" name="sex" value="" title=">=">
          <input type="radio" name="sex" value="" title="<=" checked>
          <input type="radio" name="sex" value="" title="==" checked>
        </div>


      </div>
      <div class="layui-form-item ">
        <label class="layui-form-label">type：</label>
        <div class="layui-input-block " >
             <input type="radio" name="sex" value="" title="文本">
            <input type="radio" name="sex" value="" title="整数" checked>
            <input type="radio" name="sex" value="" title="时间戳（毫秒）" checked></div>
      </div>

      <div class="layui-form-item layui-form-text" style="width: 100%;">
        <label class="layui-form-label"></label>
        <div class="layui-input-block" >
          <textarea name="desc" placeholder="可以输入多行文本" class="layui-textarea" style="width: 400px;"></textarea>
          <input type="text"  name="title"    placeholder="请输入标题" autocomplete="off" class="layui-input input1 ">
          <input type="text"  name="title"    placeholder="请输入标题" autocomplete="off" class="layui-input input1 ">
        </div>
      </div>
      <div class="layui-form-item layui-form-text" style="width: 100%;">
        <label class="layui-form-label"></label>
        <div class="layui-input-block" >
          <p>规则数量：0</p>
          <p>∮表示空占位符</p>
        </div>

      </div>
      <div class="aitem1">
        <div class="block">
          <button class="layui-btn" id="cancle">取消</button>
          <button class="layui-btn">立即提交</button>
        </div>
      </div>
    </form>
  </div>
  <div class="zzao" id="zzao1">
    <form class="layui-form" action="">
      <div class="layui-form-item">
        <label class="layui-form-label">输出类型：</label>
        <div class="layui-input-block" >
          <input type="radio" name="sex" value="" title="失败">
          <input type="radio" name="sex" value="" title="成功" checked>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">状态：</label>
        <div class="layui-input-block" >
          <input type="radio" name="sex" value="" title="运行中">
          <input type="radio" name="sex" value="" title="关闭" checked>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">类型：</label>
        <div class="layui-input-block" >
          <input type="radio" name="sex" value="" title="文本">
          <input type="radio" name="sex" value="" title="302" checked>
        </div>
      </div>

      <div class="layui-form-item layui-form-text" style="width: 100%;">
        <label class="layui-form-label">输出:</label>
        <div class="layui-input-block" >
          <textarea name="desc" placeholder="可以输入多行文本" class="layui-textarea" style="width: 400px;"></textarea>
        </div>
      </div>
      <div class="aitem1">
        <div class="block">
          <button class="layui-btn" id="cancle1">取消</button>
          <button class="layui-btn">立即提交</button>
        </div>
      </div>
    </form>
  </div>
  <div class="zzao" id="zzao2">
    <form class="layui-form layui-form1" action="" style="width: 450px;padding: 50px;">
      <p class="p">是否确定删除？</p>
      <div class="aitem1">
        <div class="block">
          <button class="layui-btn" id="cancle2">取消</button>
          <button class="layui-btn">确定</button>
        </div>
      </div>
    </form>
  </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.2/jquery.js"></script>
<!-- <script src="./js/laydate.js"></script> -->
<script src="./layui/layui.all.js"></script>

<script>
 window.onload = function () {
    $('#cancle').click(function (e) {
      e.preventDefault();
      console.log(999)
       var d = document.getElementById('zzao')
       d.style.display = 'none'
    })
    $('#adds').click(function (e) {
      e.preventDefault();

       var d = document.getElementById('zzao')
       d.style.display = 'block'
    })
    $('#cancle1').click(function (e) {
      e.preventDefault();
      console.log(999)
       var d = document.getElementById('zzao1')
       d.style.display = 'none'
    })
    $('#adds1').click(function (e) {
      e.preventDefault();

       var d = document.getElementById('zzao1')
       d.style.display = 'block'
    })
    $('.delete').click(function (e) {
      console.log(888)
       var d = document.getElementById('zzao2')
       d.style.display = 'block'
    })
    $('#cancle2').click(function (e) {
      e.preventDefault();
       var d = document.getElementById('zzao2')
       d.style.display = 'none'
    })
    layui.use([ 'laydate','table'], function(){
    var $ = layui.$;
    var laydate = layui.laydate;
    var max = null;
       var start = laydate.render({
        elem: '#start_time',
        type: 'date',
        btns: ['clear', 'confirm'],
        done: function(value, date){

        }
    });
    // var start1 = laydate.render({
    //     elem: '#start_time1',
    //     type: 'time	',
    //     btns: ['clear', 'confirm'],
    //     done: function(value, date){

    //     }
    // });
    var end = laydate.render({
        elem: '#end_time',
        type: 'date',
        done: function(value, date){

        }
      });
      // var end1 = laydate.render({
      //   elem: '#end_time1',
      //   type: 'time',
      //   done: function(value, date){
      //       // if($.trim(value) == ''){
      //       //     var curDate = new Date();
      //       //     date = {'date': curDate.getDate(), 'month': curDate.getMonth()+1, 'year': curDate.getFullYear()};
      //       // }
      //       // start.config.max = date;
      //       // start.config.max.month = date.month -1;
      //   }
      // });
      table.render({
        elem:'#userList',
        page: {
                 layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], //自定义分页布局
                groups: 5 ,//只显示 5 个连续页码
                first: true ,//显示首页
                last: true, //显示尾页
              },
      limits:[100,500,1000]
      })
    })
  }
</script>
</html>
